import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import './style.less'
class LoadMore extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }
    render() {
        let {loadMoreFn,isLoadingMore,page} = this.props;
        return (
            <div className="load-more" ref="wrapper">
                {
                   isLoadingMore ? <span>加载中</span> :
                   <span onClick = {loadMoreFn} >加载更多</span>
                }
            </div>
        )
    }
    //下拉加载
    componentDidMount() {
        let {loadMoreFn,isLoadingMore,hasMore,page} = this.props;
        let wrapper = this.refs.wrapper;
        let timeoutId =null;
        function callback () {
            //距离顶部的距离
            let top = wrapper.getBoundingClientRect().top;
            //屏幕的高度
            let windowHeight = window.screen.height;
            if(top && top<windowHeight && hasMore){
                //证明 wrapper已经被滚动到暴露在页面可视范围之内了
               loadMoreFn()
            }
        }
        window.addEventListener('scroll',()=>{
           if(isLoadingMore){
                return
           }
           //避免平凡的判断
           if(timeoutId){
                clearTimeout(timeoutId)
           }
           timeoutId = setTimeout(callback,50)
        },false)
    }
}
export default LoadMore